<template>
    <div>
   <div class="header_img">
            <image :src="src1" class="header_img1"></image>
            <div class="text_1">
                <div class="header_img2">
                    <text class="header_text">{{shopName}}</text>
                    <!--<image class="text_image1" :src="src2"></image>-->
                    <!--<image class="text_image1" :src="src2"></image>-->
                    <!--<image class="text_image1" :src="src2"></image>-->
                    <text class="text_attestation" >待认证</text>
                 </div> 
                 <div class="text_adress">
                    <image class="text_adress1" :src="src3"></image>
                    <text class="text_adress2">{{shopPath}}</text>
                 </div>
            </div>
        </div>
        <!-- 店铺类别 -->
        <div class="shop_category">
            <text class="shop_category_name">店铺类别：</text>
            <div class="shop_category_category" v-for="(index,item) in shopServes" :key="index.item">
                <image :src="index.img" class="shop_category_category_img"></image>
                <text class="shop_category_name_text">{{index.scname}}</text>
            </div>
        </div>
        <!-- 店铺简介 -->
        <text class="shop_synopsis">店铺简介：</text>
        <text class="shop_synopsis_text">{{shopInstructions}}</text>
        <div class="compile">
            <image :src="src5" class="compile_shop" @click="editor1()"></image>
            <text class="compile_shop1" @click="editor1()">编辑店铺信息</text>
        </div>
        <!-- 万能的分割线~~~~~~~~~~~~~ -->
        <div class="segmentation"></div>
        <div class="list_li" @click="jumo1()">
            <div class="list_l" v-for="(index,item) in list2" :key="index.item">
                <div class="list_lis">
                  <image :src="index.src" class="lis_lis"></image>
                </div>
                <text class="list_list">{{index.title}}</text>
            </div>
        </div>
         <div class="foot">
           <div class="shop" @click="jump1()">
               <image :src="src1_1" class="shop_img1"></image>
               <text class="shop_text1">店铺</text>
           </div>
           <div class="pay" @click="jump2()">
               <image :src="src1_2" class="shop_img2"></image>
               <text class="shop_text2">收款</text>
           </div>
           <div class="news" @click="jump3()">
               <image :src="src1_3" class="shop_img3"></image>
               <text class="shop_text3">消息</text>
           </div>
           <div class="mine" @click="jump4()">
               <image :src="src1_4" class="shop_img4"></image>
               <text class="shop_text4">我的</text>
           </div>
        </div>
        <!-- 弹窗 -->
        <div class="shade" v-if="shade1"></div>
        <!-- 弹窗上层按钮 -->
        <div class="top_shade" v-if="shade1">
            <text class="top_shade_text">设置店铺基本信息后客户才能看到</text>
            <text class="top_shade_text1">您的店铺哦~</text>
            <text class="top_shade_button" @click="jumpto()">好的,去设置</text>
        </div>
         <!-- 未认证的弹窗 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长：需要实名认证才能发布商品哦~</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11" @click="sure()">确定</text>
                </div>
              </div>
            </div>
         </div> 
        <!-- 佛祖保佑，永无bug -->
    </div>
</template>
<style scoped>
    .header_img{
        width: 100%;
        height: 68px;
        /*background-color: pink;*/
        flex-direction: row;
        flex-wrap: nowrap;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        padding-left: 12px;
        margin-top: 20px;
      }
    .foot{
        flex-direction: row;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 48px;
        border-top: solid 1px #eee;
        justify-content: space-around;
        box-sizing: border-box;
        box-shadow: 2px 1px 1px #ccc;
        background-color: #fff;
        z-index: 1;  
    }
    .shop_img1,.shop_img2,.shop_img3,.shop_img4{
        width: 19px;
        height: 20px;
        /*background-color: silver;*/
        z-index: 1;
    }
    .shop,.pay,.news,.mine{
        width: 40px;
        height: 48px;
        padding-top: 5px;
        align-items: center;
        z-index: 1;
    }
    .shop_text1,.shop_text2,.shop_text3,.shop_text4{
        font-size: 13px;
        width: 80px;
        text-align: center;
        justify-content: center;
        margin-top: 6px;
        color: #999;
        z-index: 1;
    }
  .list_lis{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*background-color: #33c179;*/
    justify-content: center;
    align-items: center;
    z-index: 1;
    box-shadow: 0px 5px #eee;
  }
  .list_list{
    width: 60px;
    height: 15px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    z-index: 1;
  }
  .list_li{
    width: 100%;
    min-height: 75px;
    /*background-color: pink;*/
    justify-content: space-between;
    flex-direction: row;
    border-top: solid 1px #eee;
    flex-wrap: wrap;
    /*padding-left: 12px;*/
    /*padding-right: 12px;*/
    box-sizing: border-box;
    z-index: 1;
  }
  .list_l{
    width: 60px;
    min-height: 75px;
    /*background-color: red;*/
    margin-top: 10px;
    margin-left: 12px;
    margin-right: 12px;
    flex-direction: column;
    margin-bottom: 15px;
    z-index: 1;
  }
  .segmentation{
    width: 100%;
    height: 2px;
    /*background-color: #ccc;*/
    margin-top: 46px;
    z-index: 1;
  }
  .compile_shop1{
    font-size: 13px;
    color: #666;
    margin-left: 10px;
    z-index: 1;
  }
  .compile_shop{
    width: 20px;
    height: 20px;
    /*background-color: red;*/
    margin-left: 254px;
    z-index: 1;
  }
  .compile{
    width: 100%;
    height: 20px;
    /*background-color: pink;*/
    margin-top: 11px;
    flex-direction: row;
    z-index: 1;
  }
  .shop_synopsis_text{
    width: 351px;
    height: 117px;
    margin: auto;
    border: solid 1px #dcdcdc;
    margin-top: 15px;
    z-index: 1;
  }
  .shop_synopsis{
    width: 100%;
    height: 14px;
    /*background-color: pink;*/
    padding-left: 12px;
    line-height: 14px;
    font-size: 14px;
    margin-top: 20px;
    z-index: 1;
  }
  .shop_category_category{
    flex-direction: row;
    /*margin-left: 22px;*/
    justify-content: space-around;
      align-items: center;
    z-index: 1;
      overflow: scroll;
  }
  .shop_category_name_text{
    font-size: 14px;
    line-height: 28px;
    margin-left: 7px;
    color: #666;
    z-index: 1;
  }
  .shop_category_category_img{
    width: 17px;
    height: 14px;
    /*background-color: #33c179;*/
    margin-left: 10px;
    z-index: 1;
  }
  .shop_category_name{
    font-size: 14px;
    line-height: 14px;
    /*background-color: silver;*/
    z-index: 1;
    /*margin-top: 6px;*/
  }
  .text_adress2{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
    margin-top: 6px;
    z-index: 1;
  }
  .shop_category{
    width: 100%;
    /*height: 14px;*/
    /*background-color: red;*/
    margin-top: 20px;
    box-sizing: border-box;
    padding-left: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 1;
  }
  .text_1{
    width: 100%;
    height: 100%;
    flex-direction: column;
    z-index: 1;
    /*padding-left: 24px;*/
  }
  .text_adress1{
    width: 17px;
    height: 24px;
    /*background-color: silver;*/
    margin-left: 24px;
    z-index: 1;
  }
  .text_adress{
    width: 100%;
    height: 24px;
    /*background-color: red;*/
    margin-top: 11px;
    flex-direction: row;
    z-index: 1;
  }
  .header_img1{
    width: 69px;
    height: 69px;
    /*background-color: silver;*/
    border-radius: 50%;
    z-index: 1;
  }
  .header_img2{
    margin-top: 14px;
    margin-left: 20px;
    flex-direction: row;
    /*flex-wrap: nowrap;*/
    height: 16px;
    width: 100%;
    /*background-color: silver;*/
    line-height: 16px;
    font-size: 16px;
    z-index: 1;
  }
  .header_text{
    line-height: 16px;
    font-size: 16px;
  }
  .text_image1{
    width: 15px;
    height: 14px;
    /*background-color: red;*/
    margin-left: 5px;
    z-index: 1;
  }
  .text_attestation{
    line-height: 16px;
    margin-left: 34px;
    z-index: 1;
  }
  .shade{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #000;
    opacity: .8;
    z-index: 99;
  }
  .top_shade{
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
  }
  .top_shade_text,.top_shade_text1{
    width: 100%;
    height: 18px;
    font-size: 18px;
    text-align: center;
    line-height: 18px;
    color: #fff;
  }
  .top_shade_text{
    margin-top: 205px;
    margin-bottom: 10px;
  }
  .top_shade_button{
    width: 182px;
    height: 60px;
    margin: auto;
    background-color: #33c179;
    border-radius: 40px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 19px;
    margin-top: 167px;
  }
  .lis_lis{
    width: 27px;
    height: 30px;
  }
  .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .www123{
      color: #33c179;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 299;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 300;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
      /*flex-direction: row;*/  
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
      flex-direction: row;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
    var stream = weex.requireModule('stream');
    // import footer from '../components/footer.vue'//引入footer组件
    export default {
        // components: {
        //     'foot': footer,
        // },
        data () {
            return {
               src1: 'http://192.168.2.123:8080/img/header.jpg', //头像
               src1_1: 'http://192.168.2.123:8080/img/shop_name.png',
               src1_2: 'http://192.168.2.123:8080/img/money.png',
               src1_3: 'http://192.168.2.123:8080/img/index_news.png',
               src1_4: 'http://192.168.2.123:8080/img/index_mine.png',
               src2: 'http://192.168.2.123:8080/img/index_diamond.png', //等级评分
               src3: 'http://192.168.2.123:8080/img/shop_adress.png',  //店铺地址
               src4: '',
               show012: false, //未认证的弹窗
               src5: 'http://192.168.2.123:8080/img/home_editor.png', //编辑信息
               shade1:false, //遮罩层
               list:[
                    {
                        src: 'http://192.168.2.123:8080/img/home_refuel.png',
                        title: '加油站',
                    },
                     {
                        src: 'http://192.168.2.123:8080/img/home_maintain.png',
                        title: '汽车维修',
                    },
                     {
                        src: 'http://192.168.2.123:8080/img/home_hairdressing.png',
                        title: '汽车美容',
                    }
               ],
               list2: [
                    {
                        src: 'http://192.168.2.123:8080/img/index_goods.png',
                        title: '商品',
                    },
                    {
                        src: 'http://192.168.2.123:8080/img/index_discuss.png',
                        title: '评论',
                    },
                    {
                        src: 'http://192.168.2.123:8080/img/index_marketing.png',
                        title: '营销',
                    },
                    {
                        src: 'http://192.168.2.123:8080/img/index_admin.png',
                        title: '店员管理',
                    },
                    {
                        src: 'http://192.168.2.123:8080/img/home_hairdressing.png',
                        title: '核销',
                    },
                     {
                        src: 'http://192.168.2.123:8080/img/index_mine_guest.png',
                        title: '客户',
                    },
                     {
                        src: 'http://192.168.2.123:8080/img/index_statistics.png',
                        title: '业务统计',
                    },
                     {
                        src: 'http://192.168.2.123:8080/img/index_tips.png',
                        title: '通告管理',
                    },

               ],
                shopName:'',
                shopPath:'',
                shopServes:'',
                shopInstructions:''
            }
        },
        beforeCreate(){
            // 页面组建前发起fetch请求数据
            var ids= JSON.parse(localStorage.getItem('usersid'));
            stream.fetch({
                method: "POST",
                url: "http://192.168.2.140:8081/api/shops/findIdShops",
                type: "json",
                headers:{"Content-Type":"application/json"},
                body: `{
				"sid":${JSON.stringify(ids.idCode)}
				}`,
            },(ret)=>{
                console.log(ret);
                this.shopName=ret.data.data.sname;
                this.shopPath=ret.data.data.saddress;
                this.shopServes=ret.data.data.shopsClassDTOS;
                this.src1=ret.data.data.headportrait;
                this.shopInstructions=ret.data.data.shopinstructions;
                const info = {
                    shopName:this.shopName,
                    shopPath:this.shopPath,
                    shopServes:this.shopServes,
                    headerImg:this.src1,
                };
                localStorage.setItem("shopMsg",JSON.stringify(info));
                const info1={
                    shopId:ret.data.data.sid
                }
                localStorage.setItem("shopId",JSON.stringify(info1));
            },function(res){
                console.log(res)
            });
        },
     methods: {
    // 点击店铺
      jump1(){
        console.log('点击店铺');
      },
        //点击收款
      jump2(){
        this.$router.push('/gathering');
      },
        //点击消息
      jump3(){
        console.log('点击消息');
      },
        //点击我的
      jump4(){
        this.$router.push('/mine');
      },
      // 点击编辑
      editor1(){
        this.shade1 = true;
      },
      jumpto(){
        this.$router.push('/setShopInfo');
      },
      jumo1(){
        this.$router.push('/shop_goods');
      },
      sure(){
        this.show012 = false;
      },
    }
    }
</script>